<template>
  <div>
    <el-button type="primary" @click="dialog=true;Add=true;Edit=false;">添加</el-button>
    <el-table
      :data="DirectIn.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="导演姓名">
              <span>{{ props.row.DirectName }}</span>
            </el-form-item>
            <el-form-item label="导演性别">
              <span>{{ props.row.Sex?"男":"女" }}</span>
            </el-form-item>
            <el-form-item label="导演 ID">
              <span>{{ props.row.DirectID }}</span>
            </el-form-item>
            <el-form-item label="导演国籍">
              <span>{{ props.row.Nationality }}</span>
            </el-form-item>
            <el-form-item label="导演身高">
              <span>{{ props.row.Height==null?"暂无资料":props.row.Height }}</span>
            </el-form-item>
            <el-form-item label="导演生日">
              <span>{{ props.row.Birhday==null?"暂无资料":props.row.Birthday }}</span>
            </el-form-item>
            <el-form-item label="演员简介">
              <span>{{ props.row.Introduced }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="导演 ID" prop="DirectID"></el-table-column>
      <el-table-column label="导演姓名" prop="DirectName"></el-table-column>
      <el-table-column label="导演国籍" prop="Nationality"></el-table-column>
      <el-table-column label="导演图片" prop="DirectImg">
        <template slot-scope="scope">
          <img :src="scope.row.DirectImg" style="width:50px;height:75px" />
        </template>
      </el-table-column>
      <el-table-column label="编辑">
        <template slot-scope="scope">
          <el-button
            type="danger"
            @click="dialog=true;Edit=true;Add=false;SelectMovie(scope.row.DirectID)"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="current_change"
      ></el-pagination>
    </div>
    <el-dialog title="导演信息" :visible.sync="dialog" @close="resetForm('searchForm')">
      <el-form ref="searchForm" label-position="left" :model="Movie" label-width="80px">
        <el-form-item label="导演姓名" prop="DirectName">
          <el-input v-model="Movie.DirectName" placeholder="导演姓名"></el-input>
        </el-form-item>
        <el-form-item label="导演性别" prop="Sex">
          <el-radio v-model="Movie.Sex" :label='true' :key="Movie.Sex">男</el-radio>
          <el-radio v-model="Movie.Sex" :label='false' :key="Movie.Sex">女</el-radio>
        </el-form-item>
        <el-form-item label="导演生日" prop="Birhday">
          <el-date-picker v-model="Movie.Birhday" type="date" placeholder="导演生日"></el-date-picker>
        </el-form-item>
        <el-form-item label="导演国籍" prop="Nationality">
          <el-input v-model="Movie.Nationality" placeholder="导演国籍"></el-input>
        </el-form-item>
        <el-form-item label="导演身高" prop="Height">
          <el-input v-model="Movie.Height" placeholder="身高M"></el-input>
        </el-form-item>
        <el-form-item label="导演简介" prop="Introduced">
          <el-input type="textarea" :rows="2" placeholder="导演简介" v-model="Movie.Introduced"></el-input>
        </el-form-item>
        <el-form-item label="导演照片" prop="ActorImg">
          <el-input v-model="Movie.DirectImg" placeholder="请输入网络图片链接"></el-input>
          <img :src="Movie.DirectImg" alt style="width:100px;height:150px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="MovieAdd()" v-if="Add">确 定</el-button>
        <el-button type="primary" @click="MovieEdit()" v-if="Edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      DirectIn: [],
      total: 0,
      pagesize: 10,
      currentPage: 1,
      dialog: false,
      DirectID: null,
      Movie: {
        DirectName: "",
        Sex: "",
        DirectImg: "",
        Birhday: "",
        Nationality: "",
        Height: "",
        Introduced: ""
      },
      Add: true,
      Edit: false,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false
    };
  },
  created() {
    this.Ajax.get("api/Direct/GetAllActor").then(M => {
      this.DirectIn = M.data;
     
      this.total = M.data.length;
    });
  },
  methods: {
    current_change: function(currentPage) {
      this.currentPage = currentPage;
    },
    resetForm(searchForm) {
      this.$refs[searchForm].resetFields();
    },
    MovieAdd() {
      this.Ajax.post("api/Direct/PostDirectInfo", {
        Movie: this.Movie
      }).then(M => {
        this.$message({
          message: "添加成功",
          type: "success"
        });
        this.dialog = false;
      });
    },
    SelectMovie(ID) {
      this.Ajax.get("api/Direct/GetDirectByDirectID?id="+ID).then(M => {
        this.Movie = M.data;
        this.DirectID = ID;
      });
    },
    MovieEdit() {
      this.Ajax.put("api/Direct/PutDirectInfo", {
        Movie: this.Movie,
        ID: this.DirectID
      }).then(M => {
        this.$message({
          message: "修改成功",
          type: "success"
        });
        this.dialog = false
      });
    }
  }
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>